<!DOCTYPE html>
<html>
<head>
    <meta name="referrer" content="no-referrer">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>胶州城市规划电子档案信息化管理系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/dist/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/dist/css/ionicons.min.css">
    <link rel="stylesheet" href="/static/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/static/dist/css/skins/all-skins.css">
    <link rel="stylesheet" href="/static/layer/theme/default/layer.css">
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <!--<link rel="stylesheet" href="/static/css/element-icons.woff">-->
    <!--<link rel="stylesheet" href="/static/css/element-icons.ttf">-->
    <link rel="stylesheet" href="/static/css/element-ui.css">
    <link href="/static/img/logo.png" rel="shortcut icon">
    <link rel="stylesheet" href="/static/webCss/index.css?v=shujubuwqd12138">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/static/plugins/ie9/html5shiv.min.js"></script>
    <script src="/static/plugins/ie9/respond.min.js"></script>
    <![endif]-->
</head>
<body class="hold-transition skin-blue-light sidebar-mini fixed" style="font-size: 18px;overflow: auto">
<div class="wrapper " id="gly">

    <div class="modal" id="editUserModel" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">个人设置</h4>
                </div>
                <div class="modal-body">
                    <form role="form" id="userbjForm">
                        <div class="form-group">
                            <label>姓名</label>
                            <input type="text" class="form-control" name="name" v-model="newUser.name" readonly>
                        </div>
                        <div class="form-group">
                            <label>所属部门</label>
                            <input type="text" class="form-control" name="dw" v-model="newUser.dw" readonly>
                        </div>
                        <div class="form-group">
                            <label>联系电话</label>
                            <input class="form-control" type="text" name="phone" v-model="newUser.phone">
                        </div>
                        <div class="form-group">
                            <label>权限角色</label>
                            <input class="form-control" type="text" name="role" v-model="role" readonly>
                            <!--<select class="form-control" name="roleId" v-model="newUser.roleId" readonly>-->
                            <!--<option v-for="(v,k) in allRole" :value="v.id">{{v.name}}</option>-->
                            <!--</select>-->
                        </div>
                        <div class="form-group">
                            <label>账户</label>
                            <input class="form-control" type="text" name="account" v-model="newUser.account">
                        </div>
                        <div class="form-group">
                            <label>密码</label>
                            <input class="form-control" type="password" name="password" v-model="newUser.password">
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal" @click="closebj">关闭</button>
                    <button @click="editUser" type="button" class="btn btn-primary" style="background-color: #2C75E8">确认修改</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <!-- Left side column. contains the logo and sidebar -->
    <header class="main-header">
    <!-- Logo -->
    <a style="float: left">
    <div style=" z-index:9999;position: absolute;top: 15px">
    <img src="/static/img/logo.png" style="width: 46px;height: 46px" >
    <span class="bt">胶州城市规划电子档案信息化管理系统</span>
    </div>
    <!--<span class="logo-lg" style="font-size: 13px">城市规划电子档案信息化管理系统</span>-->
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top btm" style="height: 70px">
    <!-- Sidebar toggle button-->
    <div class="navbar-custom-menu">
    <ul class="nav navbar-nav">
    <!-- User Account: style can be found in dropdown.less -->
    <li class="dropdown user user-menu">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="height: 70px">
    <!--<img src="/static/dist/img/user2-160x160.jpg" class="user-image" alt="User Image">-->
    <span class="hidden-xs" style="position: relative;top: 9px;color: #7490C2;size: 14px"><i class="fa fa-user-circle" aria-hidden="true"></i>&nbsp&nbsp欢迎您，{{admin}}<i class="fa fa-caret-down"></i></span>
    </a>
    <ul class="dropdown-menu" style="width: 100%">
    <li class="user-footer">
    <div class="text-center row">
        <div class="col-xs-12">
            <a href="#" class="btn btn-default" onclick="zxLogin()" style="margin: 1px"><i class="fa fa-power-off" aria-hidden="true"></i>注销登录</a>
        </div>
        <div class="col-xs-12">
            <a href="#" class="btn btn-default glyphicon glyphicon-user" onclick="grsz()"  style="margin: 1px">个人设置</a>
        </div>
        <div class="col-xs-12">
            <a href="" class="btn btn-default" onclick="yhsc()" style="margin: 1px"><i class="fa fa-book" aria-hidden="true"></i>用户手册</a>
        </div>
    </div>
    </li>
    </ul>
    </li>
    <!-- Control Sidebar Toggle Button -->
    </ul>
    </div>
    </nav>
    </header>
    <aside class="main-sidebar">
    <section class="sidebar" style="position: relative;top: 20px;background-color: #2F54EB">
    <ul class="sidebar-menu">
    </ul>
    </section>
    </aside>
    <div class="content-wrapper " id="content-wrapper">
        <!--bootstrap tab风格 多标签页-->
        <div class="content-tabs" style="margin-top: 18px;border-top: solid 1px #ffffff">
            <div class="btn-group roll-nav roll-left">
                <div class="btn-group roll-nav roll-left">
                    <button class="" data-toggle="offcanvas" title="侧边栏展开/收起" style="background-color: #F2F3F7;height: 42px!important;">
                        <b style="margin-left: -50%">三</b>
                    </button>
                </div>
                <button class="roll-nav  tabLeft" onclick="scrollTabLeft()" style="width: 25px;background-color: #F2F3F7;height: 42px!important;margin-left: -2%">
                    <i class="fa fa-backward"></i>
                </button>
            </div>

            <nav class="page-tabs menuTabs tab-ui-menu" id="tab-menu" style="background-color: #F2F3F7">
                <div class="page-tabs-content">

                </div>
            </nav>

            <button class="roll-nav roll-right tabRight" onclick="scrollTabRight()" style="background-color: #F2F3F7">
                <i class="fa fa-forward" style="margin-left: 3px;"></i>
            </button>
            <div class="btn-group roll-nav roll-right">
                <button class="dropdown tabClose" data-toggle="dropdown" style="font-size: 14px;background-color: #F2F3F7">
                    页签操作<i class="fa fa-caret-down"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-right" style="min-width: 128px;background-color: #F2F3F7">
                    <li><a class="tabReload" href="javascript:refreshTab();"><i class="fa fa-refresh" aria-hidden="true"></i>刷新当前</a></li>
                    <li><a class="tabCloseCurrent" href="javascript:closeCurrentTab();"><i class="fa fa-times" aria-hidden="true"></i>关闭当前</a></li>
                    <li><a class="tabCloseAll" href="javascript:closeOtherTabs(true);"><i class="fa fa-window-close" aria-hidden="true"></i>全部关闭</a></li>
                    <li><a class="tabCloseOther" href="javascript:closeOtherTabs();"><i class="fa fa-window-close-o" aria-hidden="true"></i>除此之外全部关闭</a></li>
                </ul>
            </div>
            <button class="roll-nav roll-right fullscreen" onclick="App.handleFullScreen()" style="background-color: #F2F3F7"><i
                    class="fa fa-arrows-alt"></i></button>
        </div>
        <div class="content-iframe ">
            <div class="tab-content " id="tab-content" style="background-color: #F4F6FA">

            </div>
        </div>
    </div>
    <!-- /.content-wrapper -->
    <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- jQuery 2.2.3 -->
<script src="/static/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<!-- Slimscroll -->
<script src="/static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/static/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/static/dist/js/app.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/dist/js/demo.js"></script>

<!--tabs-->
<script src="/static/dist/js/app_iframe.js"></script>
<script src="/static/js/vue.js"></script>
<script src="/static/js/vue-resource.min.js"></script>
<script src="/static/layer/layer.js"></script>
<script src="/static/js/myJs.js?v=shujubuwqd12138"></script>
<script src="/static/js/element-ui.js"></script>
<script src="/static/js/vue-router.js"></script>
<script src="/static/js/newJs.js?v=shujubuwqd12138"></script>


<!--<script src="../dist/js/jquery.blockui.min.js"></script>
<script src="../dist/js/appx.js"></script>
<script src="../dist/js/bootstrap-tab.js"></script>
<script src="../dist/js/sidebarMenu.js"></script>-->
<script type="text/javascript">
    newCss("/static/webCss/index.css");
    $(".nav-link").click(function() {
        $(".nav-link").removeClass("active");
        $(this).addClass("active");
    });
    function yhsc() {
        window.open('/static/yhsc/胶州城市规划电子档案信息化管理系统用户手册.pdf')
        // var u = "/jy/api/getPdf/"+name+"/"+0;
        // top.addTabs({
        //     id: "63233",
        //     text: "PDF浏览器",
        //     icon: "fa fa-circle-o",
        //     url: "/static/pdf/web/viewer.html?file="+u,
        //     targetType: "iframe-tab",
        //     close:true
        // });
        // top.addTabs({
        //     id: "190012",
        //     text: "用户手册",
        //     icon: "fa fa-book",
        //     url: "yhsc",
        //     targetType: "iframe-tab",
        //     close:true,
        // });
    }

    function grsz() {
        $('#editUserModel').modal('show');
    }
    function refresh() {
        $.get('/dalr/api/queryDShCount').then( function (result) {
            var data = result.body;
            if(result.code == 200){
                vue.$data.count = result.data;
                if(result.data ==0){
                    vue.$data.isShow = false;
                }
            }
        });
    }
    function zxLogin(){
        $.get('/zxLogin',function (data) {
            if(data.code == 200){
                window.location.href="/login";
            }
        });
    }
    var vue = new Vue({
        el:"#gly",
        data:{
            isCollapse: false,  //false为展开 true为收缩
            activeTab: '1', //默认显示的tab
            tabIndex: 1, //tab目前显示数
            tabsItem: [
                {
                    title: '首页',
                    name: '1',
                    closable: false,
                    ref: 'tabs',
                }
            ],
            tabsPath: [{
                name: "1",
                path: '/sy'
            }],
            role:null,
            isShow:false,
            admin:null,
            count:null,
            newUser:{
                id:null,
                name:null,
                dw:null,
                phone:null,
                roleId:null,
                account:null,
                password:null,
            }
        },
        computed: {
            setHeight() {
                return document.documentElement.clientHeight - 65
            },
            activeNav() { //当前激活的导航
                return this.$route.path
            }
        },
        watch: {
            '$route': function (to) {  //监听路由的变化，动态生成tabs
                let flag = true //判断是否需要新增页面
                const path = to.path
                if (Object.keys(to.meta).length != 0) {
                    for (let i = 0; i < this.$refs.tabs.length; i++) {
                        if (i != 0) { //首页不判断 如果页面已存在，则直接定位当页面，否则新增tab页面
                            if (this.$refs.tabs[i].label == to.meta.name) {
                                this.activeTab = this.$refs.tabs[i].name  //定位到已打开页面
                                flag = false
                                break
                            }
                        }
                    }
                    //新增页面
                    if (flag) {
                        //获得路由元数据的name和组件名
                        const thisName = to.meta.name
                        const thisComp = to.meta.comp
                        //对tabs的当前激活下标和tabs数量进行自加
                        let newActiveIndex = ++this.tabIndex + ''
                        //动态双向追加tabs
                        this.tabsItem.push({
                            title: thisName,
                            name: String(newActiveIndex),
                            closable: true,
                            ref: 'tabs',
                            content: thisComp
                        })
                        this.activeTab = newActiveIndex
                        /*
                        * 当添加tabs的时候，把当前tabs的name作为key，path作为value存入tabsPath数组中
                        * key:tabs的name
                        * value:tabs的path
                        * {
                        *   key: name,
                        *   value: path
                        * }
                        * ///后面需要得到当前tabs的时候可以通过当前tabs的name获得path
                        * */
                        if (this.tabsPath.indexOf(path) == -1) {
                            this.tabsPath.push({
                                name: newActiveIndex,
                                path: path
                            })
                        }
                    }
                }
            }
        },
        methods:{
            open(){
                $.get('/wdjy').then(function (res) {

                })
            },
            closebj(){
                $('#editUserModel').modal('hide');
            },
            //确认修改
            editUser(){
                this.$http.post('/updataUser',this.newUser,{emulateJSON:true}).then( function (result) {
                    var data = result.body;
                    if(data.code == 200){
                        cxAlertOk("用户信息修改成功");
                        $('#editUserModel').modal('hide');
                        top.zxLogin();
                    }else {
                        cxAlert(data.mess);
                    }
                })
            },
            isOpen() { //判断左侧栏是否展开或收缩
                if (this.isCollapse == false) {
                    this.isCollapse = true
                } else {
                    this.isCollapse = false
                }
            },
            removeTab(targetName) { //删除Tab
                let tabs = this.tabsItem; //当前显示的tab数组
                let activeName = this.activeTab; //点前活跃的tab

                //如果当前tab正活跃 被删除时执行
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                                this.tabClick(nextTab)
                            }
                        }
                    });
                }
                this.activeTab = activeName;
                this.tabsItem = tabs.filter(tab => tab.name !== targetName);
                //在tabsPath中删除当前被删除tab的path
                this.tabsPath = this.tabsPath.filter(item => item.name !== targetName)
            },
            tabClick(thisTab) {
                /*
                * thisTab:当前选中的tabs的实例
                * 通过当前选中tabs的实例获得当前实例的path 重新定位路由
                * */
                let val = this.tabsPath.filter(item => thisTab.name == item.name)
                this.$router.push({
                    path: val[0].path
                })
            }
        },
        created() {
            /*
            * 使用js的sessionStorage读取刷新前的数据，并按刷新前的tabs顺序重新生成tabs
            * */
            const sessionTabs = JSON.parse(sessionStorage.getItem("tabsItem"))
            if(sessionTabs.currTabsItem.length != 0 && sessionTabs.currTabsPath.length != 0) {
                for(let i=0; i<sessionTabs.currTabsItem.length; i++) {
                    this.tabsItem.push({
                        title: sessionTabs.currTabsItem[i].title,
                        name: sessionTabs.currTabsItem[i].name,
                        closable: true,
                        ref: sessionTabs.currTabsItem[i].ref,
                        content: sessionTabs.currTabsItem[i].content
                    })
                }
                for(let j=0; j<sessionTabs.currTabsPath.length; j++) {
                    this.tabsPath.push({
                        name: sessionTabs.currTabsPath[j].name,
                        path: sessionTabs.currTabsPath[j].path
                    })
                }
                this.activeTab = sessionTabs.currActiveTabs
                this.tabIndex = sessionTabs.currIndex
                //避免强制修改url 出现浏览器的url输入框的路径和当前tabs选中的路由路径不匹配
                const activePath = this.tabsPath.filter(item => item.name == this.activeTab)
                this.$router.push({
                    path: activePath[0].path
                })
            }
        },
        mounted:function () {
            window.addEventListener('beforeunload', e => {
                sessionStorage.setItem("tabsItem", JSON.stringify({
                    currTabsItem: this.tabsItem.filter(item => item.name !== "1"),
                    currTabsPath: this.tabsPath.filter(item => item.name !== "1"),
                    currActiveTabs: this.activeTab,
                    currIndex: this.tabIndex
                }))
            });
            this.$http.get('/getUser').then( function (result) {
                var data = result.body;
                if(data.code == 200){
                    vue.$data.newUser.id = data.data.id;
                    vue.$data.newUser.dw = data.data.dw;
                    vue.$data.newUser.name = data.data.name;
                    vue.$data.newUser.password = data.data.password;
                    vue.$data.newUser.phone = data.data.phone;
                    vue.$data.newUser.account = data.data.account;
                    vue.$data.newUser.roleId = data.data.roleId;
                    vue.$data.role = roleId2RoleName(data.data.roleId);
                    vue.$data.admin = data.data.name;
                    if(data.data.id ==13){
                        vue.$data.isShow = true;
                    }
                }
            });
            this.$http.get('/dalr/api/queryDShCount').then( function (result) {
                var data = result.body;
                if(data.code == 200){
                    vue.$data.count = data.data;
                    if(data.data ==0){
                        vue.$data.isShow = false;
                    }
                }
            });
        }
    })

    $(function () {
        App.setbasePath("../");
        App.setGlobalImgPath("/static/dist/img/");

        // addTabs({
        //     id: "190011",
        //     text: "首页",
        //     icon: "fa fa-circle-o",
        //     url: "sy",
        //     targetType: "iframe-tab"
        // });
        addTabs({
            id: "190013",
            text: "首页",
            icon: "fa fa-book",
            url: "sy",
            targetType: "iframe-tab"
        });

        App.fixIframeCotent();

        $.get('/qx',function (data) {
            // var str = '<span class="pull-right-container"></span>';
            //data.data[1].children[4] = null;
            // document.getElementById(id).innerHTML = str;
            var menus = data.data;
            $('.sidebar-menu').sidebarMenu({data: menus});
            // 动态创建菜单后，可以重新计算 SlimScroll
            $.AdminLTE.layout.fixSidebar();
        });
        // var menu = document.getElementsByClassName("menu-open");
        // menu.innerHTML = '<small class="badge pull-right bg-red">5</small>';

    });

    $(function () {

        App.setbasePath("../");
        App.setGlobalImgPath("static/dist/img/");

        // addTabs({
        //     id: "190011",
        //     text: "法律法规检索",
        //     icon: "fa fa-circle-o",
        //     url: "flfg",
        //     targetType: "iframe-tab"
        // });

        App.fixIframeCotent();

        var menus = [
            {
                id: "9000",
                text: "",
                icon: "",
                //isHeader: true
            }
        ];
        $('.sidebar-menu').sidebarMenu({data: menus});

        // 动态创建菜单后，可以重新计算 SlimScroll
        $.AdminLTE.layout.fixSidebar();

    });
</script>

</body>
</html>
